<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询用户</title>
</head>
<body>
<!-- 头部引入头部页面 -->
<div th:replace="admin/header :: header"></div>

<div class="main">
    <div style="font-size: 50px;font-family: '华文行楷';padding-top: 10px">查询用户</div>
    <div class="users-pane">
        <table lay-filter="test" class="layui-hide" id="test"></table>
    </div>
</div>
<!-- 工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div id="edit-user" style="display: none">
    <input class="layui-input" name="username" value="{{value}}">
    <input class="layui-input" name="email" value="{{email}}">
</div>
<script>
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        table.render({
            id: 'test',
            elem: '#test'
            , url: './user/list'
            , page: true
            , title: '用户列表'
            , cols: [
                [
                    {field: 'id', minWidth: 100, title: '用户id', sort: true}
                    , {field: 'username', minWidth: 100, title: '用户名'}
                    , {field: 'email', minWidth: 100, title: '邮件'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 100, align: 'center'}
                ]
            ]

        });
        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: "./delete/user",
                        data: {id: data.id},
                        success: function (res) {
                            layer.close(index);
                            if (res.status === 200) {
                                obj.del()
                                layer.msg("删除用户成功")
                            } else {
                                layer.msg(res.data)
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.close(index);
                            layer.msg("网络错误, 删除用户失败", {icon: 2})
                        }
                    })

                });
            } else if (layEvent === 'edit') { //编辑
                layer.prompt({
                    title: "输入用户名, 并确认"
                    , formType: 2
                    , value: data.username

                }, function (username, index) {
                    layer.close(index);
                    layer.prompt({title: '输入邮箱并确认', formType: 2, value: data.email}, function (email, index) {
                        data.username = username;
                        data.email = email;
                        $.ajax({
                            url: './update/user',
                            type: 'post',
                            data: data,
                            success: function (res) {
                                if (res.status === 200) {
                                    obj.update({
                                        username: res.data.username,
                                        email: res.data.email
                                    });
                                    layer.msg("更新用户信息成功")
                                } else {
                                    layer.msg(res.data)
                                }
                                layer.close(index);
                            },
                            error: function (xhr, status, error) {
                                layer.close(index);
                                layer.msg("网络请求错误")
                            }
                        })
                    });
                });
            }
        });
    });
</script>

</body>
</html>